<template>
  <div class="confirm-modal" v-if="visible">
    <div class="confirm-content">
      <h3 class="confirm-title">{{ title }}</h3>
      <p class="confirm-desc">{{ content }}</p>
      <div class="confirm-buttons">
        <button @click="handleCancel">取消</button>
        <button @click="handleConfirm">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: { type: String, default: '确认操作' },
  content: { type: String, default: '是否确认执行该操作？' },
  visible: { type: Boolean, default: false }
});

const emit = defineEmits(['cancel', 'confirm']);

const handleCancel = () => {
  emit('cancel');
};

const handleConfirm = () => {
  emit('confirm');
};
</script>